<template>
  <layout class="no-padding h-75vh">
    <template slot="operation">
      <div class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>工艺路线管理</el-breadcrumb-item>
          <el-breadcrumb-item>技术评审</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-button-group>
        <el-button type="primary" @click="selectReviewList()">刷新</el-button>
      </el-button-group>
    </template>
    <template slot="content">
      <el-table border stripe :data="processList" row-key="id" @row-dblclick="showDetail">
        <el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
        <el-table-column prop="dispatchFormNumber" label="派工单号" align="center" min-width="150"></el-table-column>
        <el-table-column prop="processName" label="评审工序" align="center" min-width="120"></el-table-column>
        <el-table-column prop="number" label="评审数量" align="center" min-width="150"></el-table-column>
        <el-table-column prop="drawingNumber" label="图号" align="center" min-width="150"></el-table-column>
        <el-table-column prop="productName" label="品名" align="center" min-width="150"></el-table-column>
        <el-table-column prop="materialQuality" label="材质" align="center" min-width="150"></el-table-column>
        <el-table-column prop="state" label="状态" align="center" min-width="120"></el-table-column>
        <el-table-column label="操作" width="150" v-if="$checkAuth(['inspectionReviewSubmit'])">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" :disabled="scope.row.state != '技术评审'" @click="techReview(scope.row)">评 审</el-button>
          </template>
        </el-table-column>
      </el-table>
      <tech-review-dialog ref="technicalReviewDialog" @review-confirm="onReview" />
    </template>
  </layout>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import Layout from '@/views/_common/Layout.vue'
import TechReviewDialog from './technical_review_dialog.vue'
import _ from 'lodash'

const vuexReview = namespace('TwoReview')

@Component({
  components: {
    Layout,
    TechReviewDialog
  }
})
export default class Index extends Vue {
  public $refs!: {
    technicalReviewDialog: any
  }

  //技术评审
  @vuexReview.State processList: any
  @vuexReview.Action GET_REVIEW_LIST: any
  @vuexReview.Action GET_REVIEW_RESULT: any
  @vuexReview.Action COMMIT_REVIEW_RESULT: any

  /*************************
   ***** 生命周期函数 *****
   *************************/
  created() {
    this.GET_REVIEW_LIST() //技术评审
  }

  /**
   * 点击评审按钮，打开评审弹框
   */
  techReview(rowData) {
    this.$refs.technicalReviewDialog.getData(rowData)
    this.$refs.technicalReviewDialog.open()
  }

  /**
   * 查询需要继续评审的工序列表
   */
  selectReviewList() {
    this.GET_REVIEW_LIST()
  }

  /**
   * 双击行查看评审详情结果
   */
  showDetail(row) {
    this.GET_REVIEW_RESULT({ id: row.id })
    this.$refs.technicalReviewDialog.getData(row.drawingNumber, row.name, row.number)
    this.$refs.technicalReviewDialog.look()
  }

  async onReview(formData: any) {
    let result = await this.COMMIT_REVIEW_RESULT(formData)
    if (result) {
      this.$refs.technicalReviewDialog.close()
      this.GET_REVIEW_LIST()
    }
  }
}
</script>

<style lang="scss" scoped>
.total {
  float: left;
  // display: inline;
  border: 1px solid #ccc;
  margin-right: 30px;
  .total_title {
    width: 200px;
    color: #000;
    height: 260px;
    line-height: 30px;
    text-align: center;
    .text {
      font-size: 18px;
      font-weight: bold;
      margin: 0 5px;
    }
  }

  &:hover {
    color: #000;
    background: #fff;
  }
}
.breadcrumb {
  height: 25px;
  width: 100%;
  border: none;
}
.s1 {
  display: none;
}
.s2 {
  height: 100px;
  display: none;
}

//通知单滚动
.notice-box {
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling: touch;
}

.notice-item {
  height: 270px;
}

/*隐藏掉滚动条*/
.notice-box::-webkit-scrollbar {
  display: none;
}

.layout .operation {
  overflow-x: auto;
}
.el-tabs {
  padding: 0 20px;
  margin: 0px 10px 0;
  border: 1px solid #e4e7ed;
  background-color: #fff;
  .el-tabs__content {
    min-width: 1200px;
  }
}
</style>